<template>
    <div style="padding: 10px 0px 0px 20px">
        <div class="ipt">
            <input type="file" name="file" class="upload__input" @change="uploadChange">
            <span style="padding-top: 10px;color: red;font-size: 13px">*大小请控制在{{Max_Size}}k之内！</span>
        </div>
        <!--    <div class="imgSrc">
              <img :src="echo" v-if="this.echo" height="120" width="100%"/>
              <img :src="picture" v-else height="120" width="100%"/>
            </div>-->
    </div>
</template>

<script>
    export default {
        props: {
            echo: String
        },
        data() {
            return {
                files: '',
                picture: '../../../static/img1/img1.png',
                Max_Size: '512',
            }
        },
        methods: {
            uploadChange(event) {
                this.file = event.target.files[0];
                this.imgPreview(this.file);
            },
            imgPreview(file) {
                let self = this;
                // 看支持不支持FileReader
                if (!file || !window.FileReader) return;
                if (/^image/.test(file.type)) {
                    // 创建一个reader
                    var reader = new FileReader();
                    // 将图片将转成 base64 格式
                    reader.readAsDataURL(file);
                    // 读取成功后的回调
                    reader.onloadend = function () {
                        self.dataUrl = this.result;
                        self.$emit('returnValue', self.dataUrl);
                    };
                }
            },
        },
    }
</script>

<style scoped>
    .upload__input {
        display: block;
    }

    .upload__input::-webkit-file-upload-button {
        background: #efeeee;
        color: #333;
        border: 0;
        border-radius: 5px;
        font-size: 12px;
        padding: 10px 15px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .1), 0 0 10px rgba(0, 0, 0, .12);
    }

    .ipt {
        display: inline-block;
    }

    .imgSrc {
        margin-top: 5px;
        width: 200px;
        display: inline-block;
    }

    .imgSrc img {
        padding: 5px;
        width: 200px;
    }
</style>
